<template>
    <div class="backgImage">
        <div class="div1">
            <TitleView title="网格风险统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <RemindA :data="dataA.value1" :title="'重大风险'" />
                <RemindA :data="dataA.value2" :title="'一般风险'" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="问题状态统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <Device :data="dataB[0].number" :title="dataB[0].title" :unit="'个'" :imageUrl="image2" :colors="1"/>
                <Device :data="dataB[1].number" :title="dataB[1].title" :unit="'个'" :imageUrl="image2" :colors="1"/>
                <Device :data="dataB[2].number" :title="dataB[2].title" :unit="'个'" :imageUrl="image3" :colors="1"/>
                <Device :data="dataB[3].number" :title="dataB[3].title" :unit="'个'" :imageUrl="image3" :colors="1"/>
            </div>
        </div>
        <div class="div3">
            <TitleView title="重大危险源统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <SafeRightC :data="DataDevice"/>
            </div>
        </div>
    </div>
</template>

<script>
import { safe_right } from "@/request/api.js"
import image2 from "@/assets/组 6832(1).png";
import image3 from "@/assets/组 6832(2).png";
import RemindA from '../Remind/components/RemindA.vue';
import Device from "../Energy/components/Device.vue"
import SafeRightC from "./components/SafeRightC.vue";
import { number } from "echarts";
export default {
    components: {
        RemindA,
        Device,
        SafeRightC
    },
    data(){
        return{
            image2:image2,
            image3:image3,
            DataDevice: [],
            dataA:{
                value1:0,
                value2:0
            },
            dataB:[
                {
                    title:"一级网格",
                    number:0
                },{
                    title:"二级网格",
                    number:0
                },{
                    title:"三级网格",
                    number:0
                },{
                    title:"四级网格",
                    number:0
                },
            ]
        }
    },
    created() {
        this.getData()
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);

        },
        getData() {
            safe_right().then((res) => {
                console.log("res:", res);
                let numberrisk=0,numberrisk1=0
                res.data.data1.forEach(element => {
                    
                    if(element.riskLevel=="重大风险"){
                        numberrisk++
                    }
                    if(element.riskLevel=="一般风险"){
                        numberrisk1++
                    }
                    this.dataB.forEach(elements=>{
                        if(elements.title==element.gridLevel){
                            elements.number++
                        }
                    })
                });
                this.dataA.value1=numberrisk
                this.dataA.value2=numberrisk1
                this.DataDevice=res.data.data3
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.div1{
    height: 277px;
    .div1_d {
        margin-top: 20px;
    }
}
.div2{
    height: 323px;
    .div1_d {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
.div3{
    .div1_d{
        margin-top: 20px;
    }
}
</style>